<@override name="content">
<div class="pagination pagination-centered">
  <div class="pull-left" id="problem-search">
    <form class="form-search" action="problem/search">
      <div class="input-append">
        <input type="hidden" name="scope" value="title">
        <input type="text" class="input-medium search-query" name="word" placeholder="Search or Goto" autofocus>
        <button type="submit" class="btn btn-info">Go</button>
      </div>
    </form>
  </div>
  <#include "../common/_paginate.html" />
  <@paginate currentPage=problemList.pageNumber totalPage=problemList.totalPage actionUrl="problem/" />
  <div class="pull-right">
    <span class="badge badge-info">${problemList.pageNumber}/${problemList.totalPage} Pages</span> 
    <span class="badge badge-info">${problemList.totalRow} Problems</span>
  </div>
</div>

<table id="problem-list" class="table table-hover table-condensed">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th>Title</th>
      <th>AC</th>
      <th>Submit</th>
      <th>Ratio</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <#if problemList??> 
    <#list problemList.list as Problem>
    <tr>
      <td class="result" pid="${Problem.pid!}"></td>
      <td class="pid"><a href="problem/show/${Problem.pid!}">${Problem.pid!}</a></td>
      <td class="title"><a href="problem/show/${Problem.pid!}"><#if Problem.status==false><del></#if>${Problem.title!}<#if Problem.status==false></del></#if>
      </a></td>
      <td class="accept"><a href="status/?pid=${Problem.pid!}&result=0">${Problem.accepted!}</a></td>
      <td class="submit"><a href="status/?pid=${Problem.pid!}">${Problem.submission!}</a></td>
      <td class="ratio"><#if (Problem.submission>0)>${(Problem.accepted/Problem.submission*100)?int}<#else>0</#if>%</td>
      <td class="ctime">${Problem.ctime_t!}</td>
    </tr>
    </#list> 
    </#if>
  </tbody>
</table>

<#if (problemList.list.size()>=pageSize/2)>
<div class="pagination pagination-centered">
  <@paginate currentPage=problemList.pageNumber totalPage=problemList.totalPage actionUrl="problem/" />
</div>
</#if>
</@override>

<@override name="scripts">
  <#if oj_style != "slate">
  <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
  <script src="assets/tablecloth/js/jquery.metadata.js"></script>
  <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
  <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>
  </#if>

  <script type="text/javascript">
    $(document).ready(function() {
      var prevpage="problem/${problemList.pageNumber-1}<#if problemList.pageSize!=pageSize>-${problemList.pageSize}</#if>"
      var nextpage="problem/${problemList.pageNumber+1}<#if problemList.pageSize!=pageSize>-${problemList.pageSize}</#if>"
      $(document).keydown(function(event) {
        <#if (problemList.pageNumber>1)>if(event.keyCode==37)window.location=prevpage;</#if>
        <#if problemList.pageNumber<problemList.totalPage>if(event.keyCode==39)window.location=nextpage;</#if>
      });

      <#if oj_style != "slate">
      $("#problem-list").tablecloth({
        theme:"stats",
        condensed:true,
        sortable:true,
        striped:true,
        clean:true
      });
      </#if>

      <#if user??>
      $.getJSON('api/problem/userResult', function(data) {
          if (data.userResult) {
        	  for (var i = 0; i < data.userResult.length; ++i) {
        		  var problem = data.userResult[i];
        		  if (problem.result != data.acType)
                  $('.result[pid=' + problem.pid + ']').addClass('wa').html('<span class="label label-important">N</span>');
              else
            	   $('.result[pid=' + problem.pid + ']').addClass('ac').html('<span class="label label-success">Y</span>');
        		}
          }
        });
      </#if>
    });
  </script>
</@override>
<@extends name="../common/_layout.html" />
